<template>
  <!-- 头部导航 -->
  <div class="box">
    <el-card>
      <div class="top">
        <div class="top1">
          <span> 教师管理 </span>
        </div>
        <div class="top2">
          <el-button
            type="success"
            style=""
            @click="dialogFormVisible = true"
            plain
            class="el-icon-folder-add"
          >
            添加教师</el-button
          >
        </div>
        <div class="top22">
          <div style="margin-top: 10px">
            <el-input
              placeholder="请输入内容"
              v-model="queryinfo.name"
              class="input-with-select"
            >
              <template #append>
                <el-button
                  icon="el-icon-search"
                  @click="teacherList"
                ></el-button>
              </template>
            </el-input>
          </div>
        </div>
      </div>
    </el-card>
    <el-card>
      <el-card>
        <!-- 列表 -->
        <el-table
          ref="multipleTable"
          :data="teacher"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <!-- @selection-change="handleSelectionChange" -->
          <!-- <el-table-column type="selection" width="100"> </el-table-column>  多选按钮 -->
          <!-- <div class="el-icon-heavy-rain"></div> -->
          <el-table-column
            prop="name"
            label="教师名称"
            style="margin-right: 20px"
            width=""
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="教师类型"
            style="margin-right: 20px"
            width=""
          >
          </el-table-column>
          <el-table-column prop="" label="操作" show-overflow-tooltip>
            <template #default="scope">
              <el-button size="mini" @click="teacheraa(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="teacherdel(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 列表 -->
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryinfo.page"
            :page-sizes="[2,8,15]"
            :page-size="queryinfo.psize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <!-- 分页 -->
      </el-card>
    </el-card>
    <!-- 添加 -->
    <el-dialog title="添加教师" width="40%" v-model="dialogFormVisible">
      <div style="margin: 20px"></div>
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="addform"
        :rules="rules"
        ref="inserform"
      >
        <el-form-item label="教师名称" prop="name">
          <el-input style="width: 300px" v-model="addform.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="tel">
          <el-input style="width: 300px" v-model="addform.tel"></el-input>
        </el-form-item>
        <el-form-item label="微信号" prop="wechat">
          <el-input style="width: 300px" v-model="addform.wechat"></el-input>
        </el-form-item>
        <el-form-item label="教师类型" prop="type">
          <el-checkbox-group v-model="addform.type">
            <!-- <span class="el-checkbox__inner"></span> -->
            <el-checkbox label="主教老师"></el-checkbox>
            <el-checkbox label="助教老师"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="teacherform('inserform')"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 添加 -->
    <!-- 修改 -->
    <el-dialog title="修改教师" width="40%" v-model="dialogFormVisiblea">
      <div style="margin: 20px"></div>
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="editform"
        :rules="rules"
        ref="inserform"
      >
        <el-form-item label="教师名称" prop="name">
          <el-input style="width: 300px" v-model="editform.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="tel">
          <el-input style="width: 300px" v-model="editform.tel"></el-input>
        </el-form-item>
        <el-form-item label="微信号" prop="wechat">
          <el-input style="width: 300px" v-model="editform.wechat"></el-input>
        </el-form-item>
        <el-form-item label="教师类型" prop="type">
          <el-checkbox-group v-model="editform.type">
            <!-- <span class="el-checkbox__inner"></span> -->
            <el-checkbox label="主教老师"></el-checkbox>
            <el-checkbox label="助教老师"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="edit('inserform')"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 修改 -->
  </div>
  <!-- 头部导航 -->
</template>

<script>
export default {
  data() {
    return {
      queryinfo: {
        psize: 8,
        page: 1,
        cat: 0,
        name: "",
      },
      teacher: [],
      total: [],
      dialogFormVisible: false,
      dialogFormVisiblea: false,
      editform: {
        id: "",
        name: "",
        tel: "",
        wechat: "",
        type: [],
      },
      addform: {
        name: "",
        tel: "",
        wechat: "",
        type: [],
      },
      rules: {
        name: [
          { required: true, message: "请输入教室名称", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        // tel: [
        //   { required: true, message: "请输入手机号", trigger: "blur" },
        //   { min: 11, max: 11, message: "请输入11个字符", trigger: "blur" },
        // ],
        // birthday: [{ required: true, message: "请选择日期", trigger: "blur" }],
        // num: [
        //   { required: true, message: "请输入编号", trigger: "blur" },
        //   { min: 3, max: 15, message: "长度在 3 到 5 个字符", trigger: "blur" },
        // ],
        // remarks: [{ required: true, message: "请填写备注", trigger: "blur" }],
      },
    };
  },
  created() {
    this.teacherList();
  },
  methods: {
    // 请求教师数据
    async teacherList() {
      //   let token = window.sessionStorage.getItem("success_token");
      //   console.log(token);
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/teachers/list",
        { params: this.queryinfo }
      );
      // console.log(res);
      if ((res.errCode = "10000")) {
        this.teacher = res.data.list;
        this.total = res.data.counts;
      } else {
        this.$message.error("请求数据失败");
      }
    },
    // 请求教师数据
    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.queryinfo.psize = val;
      this.teacherList();
    },
    handleCurrentChange(val) {
      this.queryinfo.page = val;
      this.teacherList();
      // console.log(`当前页: ${val}`);
    },
    // 分页结束
    // 添加
    async teacherform(inserform) {
      let flag = false;
      this.$refs[inserform].validate((res) => {
        if (res == false) {
          flag = true;
        }
      });
      if (flag) {
        return;
      }
      // console.log(this.addform.type);
      let nan = this.addform.type;
      let type = nan.join(",");
      this.addform.type = type;
      // 发起网络请求+
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/teachers/add",
        this.addform
      );
      // console.log(res.data.type);
      if ((res.errCode = "10000")) {
        this.$message.success("添加成功");
        this.dialogFormVisible = false;
        this.teacherList();
      } else {
        this.$message.error("添加失败");
      }
      // 发起网络请求
    },
    //添加
    //删除
    async teacherdel(id) {
      const result = await this.$confirm("此操作将永久删除该记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((error) => {
        return error;
      });
      if (result == "confirm") {
        const { data: res } = await this.$http.get(
          "http://www.eshareedu.cn/edusystems/api/teachers/delete",
          { params: { id: id } }
        );
        if (res.errCode == "10000") {
          this.$message.success("删除成功");
          this.teacherList();
        } else {
          this.$message.error("删除失败");
        }
      }
    },
    //删除
    // 修改获取表单值
    teacheraa(row) {
      // console.log(row);
      this.dialogFormVisiblea = true;
      this.editform.id = row.id;
      this.teacher.forEach((item) => {
        if (row.id == item.id) {
          this.editform.name = row.name;
          this.editform.tel = row.tel;
          this.editform.wechat = row.wechat;
          this.editform.type = row.type;
        }
      });
    },
    // 修改获取表单值
    // 修改
  async  edit(){
        const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/teachers/add",
        this.editform
      );
      // console.log(res.data.type);
      if ((res.errCode = "10000")) {
        this.$message.success("修改成功");
        this.dialogFormVisiblea = false;
        this.teacherList();
      } else {
        this.$message.error("修改失败");
      }
    }
    // 修改
  },
};
</script>



<style lang="less" scoped>
.box {
  width: 100%;
}

.top {
  height: 60px;
  //   background-color: aqua;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  display: flex;
}

.top .top1 {
  width: 145px;
  height: 50px;
  //   background-color: rgb(219, 219, 219);
  border-radius: 100px;
  margin-top: 5px;
  font-weight: bold;
  span {
    display: block;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
  }
}

.top .top2 {
  width: 110px;
  height: 40px;
  // background-color: blue;
  margin-top: 10px;
}

.top .top22 {
  margin-left: 50px;
  width: 300px;
  height: 40px;
}

.block {
  margin-top: 10px;
  margin-left: 300px;
}
</style>